<template>
  <div>
    <!-- 搜索部门信息的搜索栏 -->
    <el-input v-model="searchUnitNo" placeholder="请输入部门编号或名称"></el-input>
    <el-button size="small" type="primary" @click="this.searchByUnitNo(searchUnitNo)">搜索</el-button>
    <el-button size="small" type="success" @click="this.showAddDialog()">新增</el-button>
    <!-- 部门表格 -->
    <el-table :data="unitData" style="width: 100%">
      <el-table-column prop="unitNo" label="部门编号" width="180"></el-table-column>
      <el-table-column prop="unitName" label="部门名称" width="180"></el-table-column>
      <el-table-column prop="pno" label="上级部门编号" width="180"></el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="gmtModify" label="修改时间" width="180"></el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template v-slot:default="scope">
          <!-- 添加一个删除按钮，并为它绑定 deleteUnit 方法 -->
          <!-- 添加一个修改信息按钮，并为它绑定 change 方法 -->
          <el-button size="small" type="danger" @click="deleteUnit(scope.row.id)">删除</el-button>
          <el-button size="small" type="primary" @click="change(scope.row)">修改信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        prev-text="上一页"
        next-text="下一页"
        page-text="第{{ this.page.currentPage }}页"
        page-size-text="每页{{ this.page.pageSize }}条">
    </el-pagination>
  </div>
  <el-dialog title="修改部门信息" v-model="dialogVisible" width="30%">
    <el-form :model="editForm" ref="editForm">
      <el-form-item label="部门编号" prop="unitNo">
        <el-input v-model="editForm.unitNo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="unitName">
        <el-input v-model="editForm.unitName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上级部门编号" prop="pno">
        <el-input v-model="editForm.pno" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="this.confirmChange()">确 定</el-button>
    </div>
  </el-dialog>
  <!-- 新增部门的对话框 -->
  <el-dialog title="新增部门" v-model="addDialogVisible">
    <el-form :model="addForm">
      <el-form-item label="部门编号" prop="unitNo">
        <el-input v-model="addForm.unitNo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="unitName">
        <el-input v-model="addForm.unitName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上级部门编号" prop="pno">
        <el-input v-model="addForm.pno" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="this.confirmAdd()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/util/request.js';


export default {
  data() {
    return {
      unitData: [], // 辅导员数据
      page: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 0 // 总条数
      },
      dialogVisible: false,// 控制修改辅导员对话框的显示
      editForm: {},
      searchUnitNo :"",
      addDialogVisible: false, // 控制新增辅导员对话框的显示
      addForm: {}
    };
  },
  created() {
    this.getUnits();
  },
  methods: {
    handleSizeChange(newSize) {
      this.page.pageSize = newSize;
      this.getUnits();
    },
    handleCurrentChange(newPage) {
      this.page.currentPage = newPage;
      this.getUnits();
    },
    getUnits() {
      request.get('/info_unit/page', {
        params: {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      }).then((res) => {
        if (res.data.code === "200") {
          this.unitData = res.data.data.records;
          this.page.total = res.data.data.total;
        }
      }).catch((err) => {
        console.error(err);
      });
    },
    searchByUnitNo(searchUnitNo) {
      if (!this.searchUnitNo) {
        this.getUnits();
      } else {
        request.get(`/info_unit/${searchUnitNo}`).then((res) => {
          if (res.data.code === "200") {
            this.unitData = res.data.data;
          } else {
            this.unitData = [];
          }
        }).catch((err) => {
          console.error(err);
        });
      }
    },
    deleteUnit(id) {
      ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除，向服务器发送请求
        request.get(`/info_unit/delete/${id}`)
            .then(() => {
              // 删除成功，重新获取数据
              this.getUnits();
              ElMessage({
                type: 'success',
                message: '删除成功!'
              });
            })
            .catch((err) => {
              // 处理错误情况
              console.error(err);
            });
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    change(row) {
      console.log(row)
      this.editForm =  row ; // 直接复制row对象
      this.dialogVisible = true;
    },
    confirmChange() {
      if (this.editForm.id) {
        // 如果存在ID，则执行修改操作
        request.post('/info_unit/edit', this.editForm)
            .then(() => {
              this.dialogVisible = false;
              this.getUnits();
              ElMessage({
                type: 'success',
                message: '更新成功!'
              });
            })
            .catch((err) => {
              console.error(err);
            });
      }
    },
    showAddDialog() {
      this.addDialogVisible = true; // 显示新增辅导员对话框
      this.addForm = {}; // 重置表单
    },
    confirmAdd() {
      request.post('/info_unit/edit', this.addForm) // 发送POST请求到服务器
          .then(() => {
            this.addDialogVisible = false; // 关闭对话框
            this.getInstructors(); // 重新获取数据
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
          })
          .catch((err) => {
            console.error(err);
          });
    },
  },

};
</script>

<style scoped>
/* 在这里添加样式 */
</style>

